React = require('react')
{View,ActivityIndicator,TextInput,Image,Text,ScrollView,TouchableHighlight,StyleSheet,Navigator,ListView,TouchableOpacity} = require('react-native')

Drawer = require('antd-mobile/lib/drawer')
Button = require('antd-mobile/lib/button')
TopNotice = require('antd-mobile/lib/notice-bar')
DrawerLayout = require('react-native-drawer-layout')
RefreshControl = require('antd-mobile/lib/refresh-control')
Dimensions = require('Dimensions')
{ width, height } = Dimensions.get('window')
{View} = require('react-native')

List = require('antd-mobile/lib/list')
InputItem = require('antd-mobile/lib/input-item')

{fetchGetList,fetchRefreshList} = require('../actions/page_ckblbg.js')

_ = require('underscore')

backImg = require('../img/back.png')
searchIcon = require('../img/search_white.png')
moment = require('moment')

DescPage = require('./page_ckblbg_detail.js')

class Page_Ckblbg extends React.Component
  constructor:(props)->
    super
    @state =
      zwcm:""
      ywcm:""
      imo:""
      mmsi:""
    @ds = new ListView.DataSource rowHasChanged:(r1,r2)->r1 isnt r2
  refreshList:->
    @props.fetchRefresh(@state.selectedValue)
  onEndReached:(event)->
    return if @props.isLoading or @props.refreshing or @props.completed
    @props.fetchGet(@props.pageIndex+1,@state.selectedValue)

  rowClick:(model)->
    {navigator} = @props
    setTimeout ->
      navigator.push
        component:DescPage
        name:'Page_ckjl_desc'
        title:'详情'
        params:
          model:model
    ,200
  onDrawerOpenChange:(isOpen)->
    @isOpen = isOpen
    unless isOpen
      @setState
        zwcm:""
        ywcm:""
        imo:""
        mmsi:""
  drawerClickHandle:->
    if @isOpen
      @drawer.drawer.closeDrawer()
    else
      @drawer.drawer.openDrawer()
  renderHeader:->
      <View style={{flexDirection:'row',flex:0,height:60,alignItems:'center', justifyContent:'center',backgroundColor:'#0066FF'}}>
        <View style={{flex:1,padding:10}}>
          <TouchableOpacity onPress={=>@props.navigator.pop()}>
            <Image source={backImg}  style={{height:30,width:30,resizeMode:'contain'}}/>
          </TouchableOpacity>
        </View>
        <View style={{flex:3,justifyContent:'center',alignItems:'center'}}>
          <Text style={{fontSize:20,color:'#ffffff'}}>船况不良报告</Text>
        </View>
        <View style={{flex:1,alignItems:'flex-end',padding:10}}>
          <TouchableOpacity onPress={@drawerClickHandle.bind(@)}>
            <Image source={searchIcon}  style={{height:30,width:30,resizeMode:'contain'}}/>
          </TouchableOpacity>
        </View>
      </View>

  _renderListColumns:->


  _renderRow:(rowData,sectionID,rowID,highlightRow)->
    <TouchableHighlight onPress={@rowClick.bind(@,rowData)} key={rowData.ID}>
      <View style={styles.row}>
        <Text style={[styles.text,{fontWeight:'bold'}]}>
          {"#{rowData.ZWCM}            #{rowData.YWCM}"}
        </Text>
        <View style={{flexDirection:'row'}}>
          <Text style={styles.text}>
            {"呼号:#{rowData.CBHH}"}
          </Text>
          <Text style={styles.text}>
          </Text>
        </View>
      </View>
    </TouchableHighlight>

  _renderBody:->
    debugger
    if @state.isFirstLoad
      <View style={width:width,height:height,backgroundColor:'#ffffff'}/>
    else
      @_renderListView()
  _renderListHeader:->
    if @props.connected is false and @props.list.length>0
      <TopNotice mode="closable" style={{margin:10}}>
        无网络连接，您现在看到的是离线缓存数据
      </TopNotice>
  _renderListFooter:->
    # if @props.isLoading
    #   <View style={{flexDirection:'row',justifyContent:'center',paddingBottom:20}}>
    #     <ActivityIndicator size='small'></ActivityIndicator>
    #     <Text>正在加载</Text>
    #   </View>
    # else if @props.completed
    #   <View style={{flexDirection:'row',justifyContent:'center',paddingBottom:20}}>
    #     <Text>到底了</Text>
    #   </View>
    debugger
    listView = @refs.listView
    curRenderedRowsCount = listView?.state.curRenderedRowsCount
    count = @dataSource.getRowCount()+1
    if @props.completed and curRenderedRowsCount>0 and curRenderedRowsCount is count
      <View style={{flexDirection:'row',justifyContent:'center',paddingTop:20,paddingBottom:30}}>
        <Text>到底了</Text>
      </View>
    else unless @props.refreshing
      <View style={{flexDirection:'row',justifyContent:'center',paddingTop:20,paddingBottom:30}}>
        <ActivityIndicator size='small'></ActivityIndicator>
        <Text style={{marginLeft:5}}>正在加载</Text>
      </View>
    else
      <View/>
  _renderListSeparator:(sectionID,rowID)->
    <View key={rowID} style={{height:1,backgroundColor:'#CCCCCC'}}/>
  _renderListView:->
    <ListView ref='listView' dataSource={@dataSource} style={{flex:1}}
          enableEmptySections={true}
          renderHeader={@_renderListHeader.bind(@)}
          renderRow={@_renderRow.bind(@)}
          renderSeparator={this._renderListSeparator.bind(@)}
          renderFooter={@_renderListFooter.bind(@)}
          initiaListSize:10
          pageSize={20}
          scrollEventThrottle={20}
          onEndReached={@onEndReached.bind(@)}
          onEndReachedThreshold={20}
          stickyHeader
          stickyProps={{
            stickyStyle: { zIndex: 999, top: 43 },
            topOffset: -43,
          }}
          refreshControl={
            <RefreshControl refreshing={@props.refreshing} onRefresh={@refreshList.bind(@)}
                distanceToRefresh={60}
                resistance={2.5}
                hammerOptions={{
                  touchAction:'auto'
                  recognizers:
                    pan:
                      threshold:10
                  }}/>
          }>
    </ListView>
  searchClickHandle:->
    debugger
    # cds =
    #   ZWCM : @refs.inputZwcm._lastNativeText
    #   YWCM : @refs.inputYwcm._lastNativeText
    #   IMO : @refs.inputIMO._lastNativeText
    #   MMSI : @refs.inputMMSI._lastNativeText
    cds =
      ZWCM : @state.zwcm
      YWCM : @state.ywcm
      IMO : @state.imo
      MMSI : @state.mmsi
    @props.fetchRefresh(cds)
    @drawer.drawer.closeDrawer()
  render:->
    that = @
    sidebar =
      <View style={{flexDirection:'column',height:height-60,backgroundColor:'#ffffff'}}>
        <List>
          <InputItem labelNumber={5} placeholder="" value={@state.zwcm} onChange={(text)=>@setState zwcm:text}>中文船名</InputItem>
          <InputItem labelNumber={5} placeholder="" value={@state.ywcm} onChange={(text)=>@setState ywcm:text}>英文船名</InputItem>
          <InputItem labelNumber={5} placeholder="" value={@state.imo}  onChange={(text)=>@setState imo:text}>IMO</InputItem>
          <InputItem labelNumber={5} placeholder="" value={@state.mmsi} onChange={(text)=>@setState mmsi:text}>MMSI</InputItem>
          <View style={{margin:12}}>
            <Button type="primary" onClick={@searchClickHandle.bind(@)}>查询</Button>
          </View>
        </List>
      </View>
    @dataSource = @ds.cloneWithRows(@props.list)
    <View style={width:width,height:height,flexDirection:'column',backgroundColor:'#ffffff',paddingBottom:10}>
      {@renderHeader()}
      {@_renderListColumns()}
      <View  style={{height:1,width:width,backgroundColor:'#CCCCCC'}}/>

      <Drawer ref={(drawer)->that.drawer=drawer}
        drawerWidth={width * 2 / 3}
        drawerPosition={DrawerLayout.positions.Right}
        sidebar={sidebar}
        onOpenChange={@onDrawerOpenChange.bind(@)}>
        {@_renderBody()}
      </Drawer>
    </View>

styles = StyleSheet.create
  row:
    flexDirection:'column'
    justifyContent:'center'
    padding:10
    backgroundColor:'#F6F6F6'
  text:
    flex:1

mapStateToProps = (state)->
  list:state.page_ckblbg.list
  isLoading:state.page_ckblbg.isLoading
  pageIndex:state.page_ckblbg.pageIndex
  completed:state.page_ckblbg.completed
  refreshing:state.page_ckblbg.refreshing
  lastFetchTime:state.page_ckblbg.lastFetchTime
  connected:state.appState.connected
mapDispatchToProps = (dispatch,wonProps)->
  fetchGet:(pageNum)->
    dispatch fetchGetList(pageNum)
  fetchRefresh:(cds)->
    dispatch fetchRefreshList(cds)


# <View style={{marginLeft:10,flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
#   <View style={{width:60}}>
#     <Text>中文船名</Text>
#   </View>
#   <View style={{flex:1}}>
#     <TextInput ref="inputZwcm"></TextInput>
#   </View>
# </View>
# <View style={{marginLeft:10,flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
#   <View style={{width:60}}>
#     <Text>英文船名</Text>
#   </View>
#   <View style={{flex:1}}>
#     <TextInput ref="inputYwcm"></TextInput>
#   </View>
# </View>
# <View style={{marginLeft:10,flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
#   <View style={{width:60}}>
#     <Text>IMO</Text>
#   </View>
#   <View style={{flex:1}}>
#     <TextInput ref="inputIMO"></TextInput>
#   </View>
# </View>
# <View style={{marginLeft:10,flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
#   <View style={{width:60}}>
#     <Text>MMSI</Text>
#   </View>
#   <View style={{flex:1}}>
#     <TextInput ref="inputMMSI"></TextInput>
#   </View>
# </View>
renderAfterTransfer = require('../highOrderComponent/renderAfterTransfer.js')
lazyLoadData = require('../highOrderComponent/lazyLoadData.js')
Page_Ckblbg = renderAfterTransfer(Page_Ckblbg)
Page_Ckblbg = lazyLoadData(moment.duration(2, 'days'))(Page_Ckblbg)

{connect} = require('react-redux')
module.exports = connect(mapStateToProps,mapDispatchToProps)(Page_Ckblbg)
